<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>平铺</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 2px solid blue;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			let oCanvas = document.getElementById('canvas');
			console.dir(oCanvas);
			let oPen = oCanvas.getContext("2d");

			let repeatCanvas = document.createElement('canvas');
			repeatCanvas.width = 47;
			repeatCanvas.height = 47;
			let repeatPen = repeatCanvas.getContext("2d");
			repeatPen.arc(15, 15, 15, 0, Math.PI / 180 * 360, true);
			repeatPen.fillStyle = "aquamarine";
			repeatPen.fill();
			let myPattern = oPen.createPattern(repeatCanvas, 'repeat');
			oPen.fillStyle = myPattern;
			oPen.fillRect(0, 0, 500, 500);
		}
	</script>
	</body>

</html>